﻿<div id="AjaxIconMainWrapper" style="display: none;">
    <div class="LoadingSquare"></div>
    <div class="LoadingSquare"></div>
    <div class="LoadingSquare" style="float: right;"></div>
    <div class="LoadingSquare" style="float: right;"></div>
</div>

<script type="text/javascript">
    var iconOffset = new Point(20, 20);
    var ajaxIconMainWrapperJq = $("#AjaxIconMainWrapper");
    $("body").mousemove(function (eventObject) {
        if (eventObject.pageX + iconOffset.X + ajaxIconMainWrapperJq.width() > $(this).width()
        ||
        eventObject.pageY + iconOffset.Y + ajaxIconMainWrapperJq.height() > $(this).height()
        )
            return;

        ajaxIconMainWrapperJq.css({ left: eventObject.pageX + iconOffset.X, top: eventObject.pageY + iconOffset.Y });
    });

    var ajaxIconVisibleIndex = 0;
    var ajaxIconLoadingSqauresJq = ajaxIconMainWrapperJq.children(".LoadingSquare");
    ajaxIconLoadingSqauresJq.each(function (index) {
        $(this).css({ "background-color": Kuler.FetchNextColor(), opacity: index == ajaxIconVisibleIndex ? 1 : '' });
    });

    //Start Animation
    function AjaxIconLoadingSqauresAnimate() {
        var nextIndex = ajaxIconVisibleIndex + 1 >= ajaxIconLoadingSqauresJq.length ? 0 : ajaxIconVisibleIndex + 1;
        $(ajaxIconLoadingSqauresJq[ajaxIconVisibleIndex]).stop().css({ "background-color": Kuler.FetchNextColor() }).animate({ opacity: 0 });
        $(ajaxIconLoadingSqauresJq[nextIndex]).stop().animate({ opacity: 1 }, globalAnimationDuration / 10, function () {
            ajaxIconVisibleIndex = nextIndex;
            AjaxIconLoadingSqauresAnimate();
        });
    };

    function AjaxIconStartAnimation() {
        AjaxIconLoadingSqauresAnimate();
    };
    function AjaxIconStopAnimation() {
        $(ajaxIconLoadingSqauresJq).stop();
        ajaxIconVisibleIndex = 0;
    };

    var ajaxIconToggleLastId = -1;
    var ajaxIconToggleCallerIds = [];
    function AjaxIconToggle(isVisible, ajaxIconToggleId) {
        if (isVisible == null)
            isVisible = !ajaxIconMainWrapperJq.is(":visible");

        if (isVisible) {
            ajaxIconToggleLastId++;
            ajaxIconToggleCallerIds.push(ajaxIconToggleLastId);
            AjaxIconStartAnimation();
            ajaxIconMainWrapperJq.fadeIn(globalAnimationDuration / 10);
        }
        else {
            var pos = $.inArray(ajaxIconToggleId, ajaxIconToggleCallerIds);
            if (pos >= 0)
                ajaxIconToggleCallerIds.splice(pos, 1);

            ajaxIconToggleLastId == ajaxIconToggleCallerIds.length == 0 ? -1 : ajaxIconToggleLastId;

            if (ajaxIconToggleCallerIds.length == 0 || ajaxIconToggleId == null) {
                ajaxIconMainWrapperJq.fadeOut(globalAnimationDuration / 10);
                AjaxIconStopAnimation();
            }
        }

        return ajaxIconToggleLastId;
    };

</script>